<!--
 * @Descripttion: 
 * @version: 
 * @Author: 冉勇
 * @Date: 2021-09-08 14:59:23
 * @LastEditTime: 2021-10-18 22:36:42
-->
<template>
<div>
    <el-row :gutter="0">
        <el-card class="box-card">
            <el-col :span="12">
                <div>
                    <span>头上一片晴天，心中一个想念</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <h3>
                        <span>雨纷纷</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>旧故里</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>草木深</span>
                    </h3>
                </div>
            </el-col>
        </el-card>
    </el-row>
    <el-row :gutter="0">
        <el-col :span="12">
                <el-card class="box-card">
                <!-- 走马灯 -->
                <el-carousel indicator-position="outside" height="200px">
                <el-carousel-item v-for="item in images" :key="item.i">
                    <img :src="item.url" alt="无图片">
                </el-carousel-item>
                </el-carousel>
                </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card">
            <!-- 时间线 -->
            <div class="block">
                <el-timeline>
                    <el-timeline-item timestamp="2021/9/18" placement="top">
                    <el-card>
                        <h4>更新用户权限树</h4>
                        <p>冉勇 提交于 2021/9/18 20:46</p>
                    </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            </el-card>
        </el-col>
    </el-row>
    <!-- 分割线 -->




    <el-card class="box-card">
    <!-- 走马灯 -->
    <el-carousel indicator-position="outside" height="500px">
    <el-carousel-item v-for="item in images" :key="item.i">
        <img :src="item.url" alt="无图片">
    </el-carousel-item>
    </el-carousel>
    </el-card>
    <el-card class="box-card">
    <!-- 时间线 -->
    <div class="block">
        <el-timeline>
            <el-timeline-item timestamp="2021/9/20" placement="top">
            <el-card>
                <h4>更新分配角色</h4>
                <p>冉勇 提交于 2021/9/20 15:46</p>
            </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/9/18" placement="top">
            <el-card>
                <h4>更新用户权限树</h4>
                <p>冉勇 提交于 2021/9/18 20:46</p>
            </el-card>
            </el-timeline-item>

        </el-timeline>
    </div>
    </el-card>
</div>
</template>

<script>
export default {
    name: "Carousel",
    data() {
        return {
            // 走马灯图片展示
            images: [
                {
                    url: "https://cdn.stocksnap.io/img-thumbs/960w/flower-blossom_QSCRVBUU2G.jpg"
                },
                {
                    url: "https://cdn.stocksnap.io/img-thumbs/960w/ocean-water_PLXWE7WVVV.jpg"
                },
                {
                    url: "https://cdn.stocksnap.io/img-thumbs/960w/flowers-exterior_AUG3VWTCBT.jpg"
                },
                {
                    url: "https://cdn.stocksnap.io/img-thumbs/960w/mountains-lake_ZDSHAYGQU1.jpg"
                }
            ]
        }
    },
    created() {
    },
    methods: {

    }

}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}
.el-carousel__item img {
    width: 100%;
}
.el-col span{
    text-align: center;
}
</style>
